<template>
  <div class="hubs_extension">
    <div class="content">
      <el-row :gutter="16">
        <el-col :span="14">
          <div class="content_item">
            <div class="item_card" style="height: 48.5%;">
              <div class="card">
                <Details :data="browser" />
              </div>
            </div>
            <div class="item_card" style="height: 48.5%;">
              <div class="card">
                <Parameter :data="browser" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="content_item">
            <div class="item_card" style="height: 100%;">
              <div class="card">
                <User />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import Details from './components/Details.vue'
import Parameter from './components/Parameter.vue'
import User from './components/User.vue'

const chrome = window.chrome;
const browser = ref({})
const intervalId = ref(null)

onMounted(() => {
  intervalId.value = setInterval(() => {
    console.log(window.ENVIRONMENT_PRINT_ID);
    
    if (window.ENVIRONMENT_PRINT_ID != undefined && window.ENVIRONMENT_PRINT_ID != null) {
      clearInterval(intervalId.value)
      const data = {
        action: 'web_first',
        ENVIRONMENT_PRINT_ID: window.ENVIRONMENT_PRINT_ID
      };

      chrome.runtime.sendMessage(data, (response) => {
        if (chrome.runtime.lastError) {
          console.error("发送失败:");
        } else {
          console.log("收到后台响应:");
        }
      });

    }
  }, 1000)

  // 发送消息到 Service Worker
  // chrome.runtime.sendMessage(data, (response) => {
  //   if (chrome.runtime.lastError) {
  //     console.error("发送失败:");
  //   } else {
  //     console.log("收到后台响应:");
  //   }
  // });

  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "updateBrowser") {
      browser.value = message.data
    }
  });
})

onUnmounted(() => {
  clearInterval(intervalId.value)
})

</script>

<style lang="scss" scoped>
.hubs_extension {
  width: 100vw;
  height: 100vh;
  background-color: #f4f6f9;
  display: flex;
  justify-content: center;


  .content {
    margin: 16px 0;
    max-width: 1200px;
    width: 1200px;
    min-width: 1200px;
    height: auto;
  }

}

.content_item {
  display: flex;
  flex-direction: column;
  height: 500px;
  justify-content: space-between;

  .item_card {
    width: 100%;
    background-color: #fff;

    .card {
      padding: 16px;
      height: calc(100% - 32px);
    }
  }
}
</style>

<style>
body {
  margin: 0 !important;
  font-size: 14px;
  color: #5b5c60;
}
</style>